<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 会员管理</p>
          </div>

          <div class="container-fluid" >
            <div class="card" style="background-color: #F8F8F8">
              <div class="card-body" >
                <div class="col-12 p-0 mt-1 mb-1" >
                  <small>温馨提示：VIP1为初始等级,用户初次开卡默认等级为VIP1。</small>
                </div>
              </div>
            </div>
          </div>

          <div class="container-fluid">

                <div align="left" class="mt-3">

                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn btn-primary"  data-toggle="modal" data-target="#grade_add">
                    <span><i class="zi zi_plus"></i>&nbsp;新增会员等级</span>
                  </button>
                  <!-- Modal -->
                  <div class="modal fade mt-5" id="grade_add" tabindex="-1" aria-labelledby="grade_label" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title" id="grade_label">等级详情修改</h6>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" >
                          <div class="" >
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>会员等级&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>名称&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>获得等级条件&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>会员权益&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><textarea type="" class="form-control"></textarea></div>
                            </div>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary">保存</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>

          </div>
          <div class="col-12 mt-4">
            <table class="table table-striped table-hover" >
              <thead>
              <tr>
                <th>会员等级</th>
                <th>名称</th>
                <th>获得等级条件</th>
                <th>会员权益</th>
                <th>启用状态</th>
                <th>操作</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td style="color: #C95A0A"><i>VIP1</i></td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>
                  <el-switch v-model="status" />
                </td>
                <td>
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#card_edit">
                    <span style="font-size: 13px">编辑</span>
                  </button>
                  <!-- Modal -->
                  <div class="modal fade mt-5" id="card_edit" tabindex="-1" aria-labelledby="card_label" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title" id="card_label">等级详情修改</h6>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" >
                          <div class="" >
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>会员等级&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>名称&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>获得等级条件&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-10 ml-4 mb-4 form-inline">
                              <div class="col-5" align="right"><span>会员权益&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><textarea type="" class="form-control"></textarea></div>
                            </div>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary">保存</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                        </div>
                      </div>
                    </div>
                  </div>&emsp;
                  <button type="button" class="btn btn-outline-danger btn-sm" ><span style="font-size: 13px">删除</span></button>
                </td>
              </tr>
              </tbody>
            </table>
            <!--分页组件-->
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardGrade",
  data(){
    return{
      status:false
    }
  }
}
</script>

<style scoped>

</style>
